<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    .title {
        height: 7%;
        font-size: 1.2em;
        font-weight: 900;
        text-align: center;
        line-height: 250%;
        background-color: #ccc;
    }

    .main {
        height: 83%;
        overflow: auto;
        background-color: rgb(120, 120, 173);
    }

    .input {
        height: 10%;
        border: none;
        background-color: #ccc;
    }

    .input>input {
        height: 60%;
        width: 90%;
        padding-left: 10px;
        font-size: 1.2em;
        margin: 4% 5%;
        border-radius: 8%;
    }

    .left {
        float: left;
        padding: 10px;
    }

    .left::after {
        content: '';
        position: relative;
        clear: both;

    }

    .left>.leftImg {
        float: left;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .left>.leftMsg {
        float: left;
        margin-left: 10Px;
        background-color: #fff;
        padding: 5px 10px;
        border-radius: 10px;
        max-width: 60%;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .right {
        float: right;
        padding: 10px;
    }

    .right>.rightImg {
        float: right;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .right>.rightMsg {
        float: right;
        margin-right: 10Px;
        background-color: #fff;
        padding: 5px 10px;
        border-radius: 10px;

        max-width: 60%;
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    span {
        color: red;
    }
</style>

<body>
    <div class="title">智能小助手</div>
    <div class="main">
        <div class="left">
            <img class="leftImg" src="01.png" alt="">
            <div class="leftMsg">您可以输入“舔狗”查看舔狗日记</div>
        </div>
        <div class="right">
            <img class="rightImg" src="01.png" alt="">
            <div class="rightMsg">您可以输入城市名称查看对应的国内天气</div>
        </div>

    </div>
    <div class="input">
        <input type="text" placeholder="请输入...">
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function sendMsg(fo, text) {
        var res = '';
        if (fo == "left") {
            res = `<div class="left">
            <img class="leftImg" src="01.png" alt="">
            <div class="leftMsg">` + text + `</div>`
        }
        else {
            res = ` <div class="right">
            <img class="rightImg" src="01.png" alt="">
            <div class="rightMsg">`+ text + `</div>
        </div>`
        }
        $('.main').append(res);
        $('.main').animate({
            scrollTop: $('.main').prop("scrollHeight")
        }, 800)

    }

    $('.input input').keypress(function (e) {

        if (e.keyCode == 13) {
            var value = $(this).val();
            sendMsg("right", value);
            $('.title').text("正在输入中.....");
            if ($(this).val() == "舔狗") {
                tiangou();
                $(this).val('')
            } else {
                $.ajax({
                    url: 'https://v1.alapi.cn/api/tianqi/now',
                    data: { location: value },
                    success(res) {
                        var result = `您查询的城市是:<span>` + value + `</span> </br>` +
                            `该城市天气状况为:<span>` + res.data.wea + `</span></br>` +
                            `该城市温度为:<span>` + res.data.tem2 + "℃~" + res.data.tem1 + "℃" + `</span></br>` +
                            `该城市风向为:<span>` + res.data.win + `</span>`;
                        sendMsg("left", result)

                    }, error() { sendMsg("left", '输入有误') },
                    complete() {
                        $('.title').text("智能小助手")
                    }

                })

            } $(this).val('')
        }


    })
    function tiangou() {
        var value = '';
        $.ajax({
            url: ' https://v1.alapi.cn/api/dog',
            data: { location: value },
            success(res) {
                sendMsg("left", res.data.content)
            }, error() { sendMsg("left", '输入有误') },
            complete: function () {
                $('.title').text("智能小助手"),
                    $(this).val('')
            }
        })
    }
</script>

</html>